<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('疫情防控信息填报')" />

      <link
      rel="stylesheet"
      href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css"
    />

    <style type="text/css">
        #imgPreview {
            width: 30%;
            height: 120px;
            margin: 10px auto 0px auto;
            border: 1px solid black;
            text-align: center;
        }
        #prompt3 {
            width: 100%;
            height: 120px;
            text-align: center;
            position: relative;
        }
        #imgSpan {
            position: absolute;
            top: 35px;
            left: 20px;
        }
        .filepath {
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        #img3 {
            height: 100%;
            width: 100%;
            display: none;
        }
        #imgPreview1 {
            width: 30%;
            height: 120px;
            margin: 10px auto 0px auto;
            border: 1px solid black;
            text-align: center;
        }
        #imgPreview2 {
            width: 30%;
            height: 120px;
            margin: 10px auto 0px auto;
            border: 1px solid black;
            text-align: center;
        }
        #prompt4 {
            width: 100%;
            height: 120px;
            text-align: center;
            position: relative;
        }
        #prompt5 {
            width: 100%;
            height: 120px;
            text-align: center;
            position: relative;
        }
        #imgSpan1 {
            position: absolute;
            top: 35px;
            left: 20px;
        }
        #imgSpan2 {
            position: absolute;
            top: 35px;
            left: 20px;
        }
        #img4 {
            height: 100%;
            width: 100%;
            display: none;
        }
        #img5 {
            height: 100%;
            width: 100%;
            display: none;
        }
        body {
            font-size: 15px;
        }
        .check-box, .radio-box {
            display: block;
            box-sizing: border-box;
            cursor: pointer;
            position: relative;
            padding-left: 40px;
            padding-right: 15px;
            padding-top: 5px;
            margin-top: 1px;
            margin-left: 15px;
        }
        .form-horizontal .form-group {
            margin-top: 20px;
        }
        .alert {
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
    </style>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-info">
                    <span th:text="${deptName}" style="font-weight: bold;font-size: 16px;"></span>
                    <span style="font-weight: bold;font-size: 16px;">防疫日报</span>
                </div>
            </div>
            <div class="col-sm-12">
                <form class="form-horizontal m" id="form-collect-add">
                    <input name="userId" class="form-control" type="hidden" th:value="${userId}">
                    <input name="deptId" class="form-control" type="hidden">
                    <input name="collectType" class="form-control" type="hidden" th:value="${collectType}">
                    <input name="userType" class="form-control" type="hidden" th:value="${userType}">
                    <input name="userName" class="form-control" type="hidden">
                    <input name="phonenumber" class="form-control" type="hidden">

                    <div class="form-group">
                        <h3 style="font-size: 16px"><label class="col-sm-12"><i class="text-danger">*</i> 安康码状态：</label></h3>
                        <div class="radio-box col-sm-12" th:each="dict : ${@dict.getType('akm_status')}">
                            <input type="radio" th:id="${'akmStatus_' + dict.dictCode}" name="akmStatus" th:value="${dict.dictValue}" required="required">
                            <label th:for="${'akmStatus_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                        </div>

                    </div>
                    <div class="form-group">
                        <h3 style="font-size: 16px"><label class="col-sm-12"><i class="text-danger">*</i> 安康码截图：</label></h3>
                        <div class="col-sm-12">
                            <input type="hidden" name="akmPath" id="akmPath">
                            <!--<div>
                                <input class="form-control" id="akmPath" name="file" type="file">
                            </div>-->
                            <div id="imgPreview">
                                <div id="prompt3">
                                 <span id="imgSpan">
                                 点击上传
                                 <br />
                                 <i class="fa fa-plus"></i>
                                 </span>
                                    <input type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG" required="required">
                                    <!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
                                </div>
                                <img src="#" id="img3" onclick="picClick()"/>
                            </div>
                        </div>
                    </div>



                    <div class="form-group">
                        <h3 style="font-size: 16px"><label class="col-sm-12"><i class="text-danger">*</i> 核酸检测时间：</label></h3>
                        <div class="col-sm-12">
                            <div class="input-group date">
                            <input type="text" name="hsTime" class="form-control" placeholder="yyyy-MM-dd" id="datetime-picker" required="required">
                               <!--  <input name="hsTime" class="form-control" placeholder="yyyy-MM-dd HH:mm:ss" type="text"> -->
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <h3 style="font-size: 16px"><label class="col-sm-12"> <i class="text-danger">*</i>  两日内核酸检测结果：</label></h3>
                        <div class="col-sm-12">
                            <div class="radio-box" th:each="dict : ${@dict.getType('hs_result')}">
                                <input type="radio" th:id="${'hsResult_' + dict.dictCode}" name="hsResult" th:value="${dict.dictValue}" required="required">
                                <label th:for="${'hsResult_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <h3 style="font-size: 16px"><label class="col-sm-12"><i class="text-danger">*</i>  核酸检测报告截图：</label></h3>
                        <div class="col-sm-12">
                            <input type="hidden" name="hsPath" id="hsPath">
                            <!--<div>
                                <input class="form-control" id="xcmPath" name="file" type="file">
                            </div>-->
                            <div id="imgPreview2">
                                <div id="prompt5">
                                 <span id="imgSpan2">
                                 点击上传
                                 <br />
                                 <i class="fa fa-plus"></i>
                                 </span>
                                    <input type="file" id="file2" class="filepath" onchange="changepic2(this)" accept="image/jpg,image/jpeg,image/png,image/PNG" required="required">
                                    <!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
                                </div>
                                <img src="#" id="img5" onclick="picClick2()"/>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <h3 style="font-size: 16px"><label class="col-sm-12"><i class="text-danger">*</i>  行程码14天是否未离肥：</label></h3>
                        <div class="col-sm-12">
                            <div class="radio-box" th:each="dict : ${@dict.getType('is_leave')}">
                                <input type="radio" th:id="${'xcmIsLeave_' + dict.dictCode}" name="xcmIsLeave" th:value="${dict.dictValue}" required="required">
                                <label th:for="${'xcmIsLeave_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <h3 style="font-size: 16px"><label class="col-sm-12"><i class="text-danger">*</i>  行程码截图：</label></h3>
                        <div class="col-sm-12">
                            <input type="hidden" name="xcmPath" id="xcmPath">
                            <!--<div>
                                <input class="form-control" id="xcmPath" name="file" type="file">
                            </div>-->
                            <div id="imgPreview1">
                                <div id="prompt4">
                                 <span id="imgSpan1">
                                 点击上传
                                 <br />
                                 <i class="fa fa-plus"></i>
                                 </span>
                                    <input type="file" id="file1" class="filepath" onchange="changepic1(this)" accept="image/jpg,image/jpeg,image/png,image/PNG" required="required">
                                    <!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
                                </div>
                                <img src="#" id="img4" onclick="picClick1()"/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <h3 style="font-size: 16px"><label class="col-sm-12"> <i class="text-danger">*</i> 体温是否正常：</label></h3>
                        <div class="col-sm-12">
                            <div class="radio-box" th:each="dict : ${@dict.getType('sys_yes_no')}">
                                <input type="radio" th:id="${'twIsNormal_' + dict.dictCode}" name="twIsNormal" th:value="${dict.dictValue}" required="required">
                                <label th:for="${'twIsNormal_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <h3 style="font-size: 16px"><label class="col-sm-12">备注：</label></h3>
                        <div class="col-sm-12">
                            <textarea name="twYcReason" class="form-control"></textarea>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" style="text-align: center">
            <button type="button" class="btn btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
       <br>
        	<br><br>
        </div>
    </div>
    <th:block th:include="include :: footer" />


  <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script>


var now = new Date();
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var hour = now.getHours(); //小时
var order_time = `${year}-${month}-${day} ${hour}:00:00`;

// 日期选择控件
var yearList = [String(year-1),String(year)];
var monthList = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
var dayList = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18",
			"19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"
		];

var dataList = [];
var index = 0;
    for (var i = 0; i < yearList.length; i++) {
       // if (year <= +yearList[i]) {
            var a = {};
            a.value = yearList[i];
            a.label = `${yearList[i]}年`;
            index++;
            a.children = [];
            for (var j = 0; j < monthList.length; j++) {
                var b = {};
                b.label = `${monthList[j]}月`;
                b.value = monthList[j];
                index++;
                if (year == +yearList[i]) {
                    //if (month - 1 <= j) {
                        a.children[a.children.length] = b;
                    //}
                } else {
                    a.children[a.children.length] = b;
                }
                b.children = [];
                for (var o = 0; o < dayList.length; o++) {
                    var c = {};
                    c.label = `${dayList[o]}日`;
                    c.value = dayList[o];
                    index++;
                    if (month == +monthList[j]) {
                        //if (day - 1 <= o) {
                            b.children[b.children.length] = c;
                       // }
                    } else {
                        b.children[b.children.length] = c;
                    }
                    c.children = [];

                    if (j + 1 == 4 || j + 1 == 6 || j + 1 == 0 || j + 1 == 11) {
                        if (o == 29) o = 31;
                    } else if (j + 1 == 2) {
                        if (
                            (+yearList[i] % 4 == 0 && +yearList[i] % 100 != 0) ||
                            +yearList[i] % 400 == 0
                        ) {
                            if (o == 28) o = 31;
                        } else {
                            if (o == 27) o = 31;
                        }
                    }
                }
            }
            dataList[dataList.length] = a;
       // }
    }
    var appointment = '';
    $('.icon-picker').click(function () {
        $("#datetime-picker").click();
    })

    $("#datetime-picker").click(function () {
    weui.picker(dataList, {
        className: "custom-classname",
        container: "body",
        defaultValue: [year, month, day, hour],
        onChange: function (result) {},
        onConfirm: function (result) {
            appointment = result[0] + "-" + result[1] + "-" + result[2] ;
            $("#datetime-picker").val(appointment)
            order_time = `${result[0]}-${result[1]}-${result[2]}`
        },
        id: "datetime-picker"
    });
});
</script>
    <script th:inline="javascript">
        var prefix = ctx + "wxcp/epidemic/collect"
          $("#form-collect-add").validate({
            focusCleanup: true
        });

        var up_flag3 = 0;
        var up_flag4 = 0;
        var up_flag5 = 0;

        function submitHandler() {
            if ($.validate.form()) {
                $.modal.confirmAduit("是否确认提交您的填报内容?", function() {
                    // $.operate.save(prefix + "/add", $('#form-collect-add').serialize());
                    var akm = $("#akmPath").val();
                    var xcm = $("#xcmPath").val();
                    if(up_flag5 == 0){
                        $.modal.alertWarning("请先上传核酸检测报告");
                        return;
                    } else if(up_flag5 == 1){
                        $.modal.alertWarning("核酸检测报告上传中，请稍等");
                        return;
                    }

                    if(up_flag3 == 0){
                        $.modal.alertWarning("请先上传安康码");
                        return;
                    } else if(up_flag3 == 1){
                        $.modal.alertWarning("安康码上传中，请稍等");
                        return;
                    }

                    if(up_flag4 == 0){
                        $.modal.alertWarning("请先上传行程码");
                        return;
                    } else if(up_flag4 == 1){
                        $.modal.alertWarning("行程码上传中，请稍等");
                        return;
                    }

                    var config = {
                        url: prefix + "/add",
                        type: "post",
                        dataType: "json",
                        data: $('#form-collect-add').serialize(),
                        beforeSend: function () {
                            $.modal.loading("正在处理中，请稍候...");
                            $.modal.disable();
                        },
                        success: function(result) {
                            if (typeof callback == "function") {
                                callback(result);
                            }
                            callback(result);
                        }
                    };
                    $.ajax(config)
                });
            }
        }

        function callback(result){
            if (result.code == web_status.SUCCESS) {
                // 跳转到保存成功页面
                window.location.href = ctx + "common/success";
            } else if (result.code == web_status.WARNING) {
                $.modal.enable();
                $.modal.closeLoading();
                $.modal.confirm("你已经提交了疫情防控收集表，请不要重复提交！", function() {
                    $.modal.enable();
                    $.modal.closeLoading();
                    window.location.href = ctx + "wxcp/epidemic/collect/show/"+result.msg;
                });
            }  else {
                $.modal.alertError(result.msg);
            }
        }

        //
        function changepic() {
            $("#prompt3").css("display", "none");
            var reads = new FileReader();
            f = document.getElementById('file').files[0];

            //上传图片到后台
            if (f == null) {
                $.modal.alertWarning("请先上传安康码");
                return false;
            }

            // 上传到页面成功
            up_flag3 = 1;
            compressPic(f,0.6,function(newfile){
	            var formData = new FormData();
	            //formData.append('fileName', $("#fileName").val());
	            //formData.append('file', f);
	             var bl = convertBase64UrlToBlob(newfile);
                 formData.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
            $.ajax({
                url: "/common/collect/upload",
                type: 'post',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function(result) {
                    // console.log(result);
                    // console.log(result.filePath);
                    $("#akmPath").val(result.filePath);
                    up_flag3 = 2;
                },
                error: function(result) {
                    $.modal.alertWarning("安康码上传失败，请重试");
                    up_flag3 = 0;
                }
            });

            reads.readAsDataURL(f);
            reads.onload = function(e) {
                document.getElementById('img3').src = this.result;
                $("#img3").css("display", "block");
            };
            });
        }

        //
        function changepic1() {
            $("#prompt4").css("display", "none");
            var reads = new FileReader();
            f = document.getElementById('file1').files[0];

            //上传图片到后台
            if (f == null) {
                $.modal.alertWarning("请先上传行程码");
                return false;
            }

            // 上传到页面成功
            up_flag4 = 1;
            compressPic(f,0.6,function(newfile){
	            var formData = new FormData();
	            //formData.append('fileName', $("#fileName").val());
	            //formData.append('file', f);
	             var bl = convertBase64UrlToBlob(newfile);
                 formData.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
	            $.ajax({
	                url: "/common/collect/upload",
	                type: 'post',
	                cache: false,
	                data: formData,
	                processData: false,
	                contentType: false,
	                dataType: "json",
	                success: function(result) {
	                    // console.log(result);
	                    // console.log(result.filePath);
	                    $("#xcmPath").val(result.filePath);
	                    up_flag4 = 2;
	                },
	                error: function(result) {
	                    $.modal.alertWarning("行程码上传失败，请重试");
	                    up_flag4 = 0;
	                }
	            });

	            reads.readAsDataURL(f);
	            reads.onload = function(e) {
	                document.getElementById('img4').src = this.result;
	                $("#img4").css("display", "block");
	            };
            });
        }

        function changepic2() {
            $("#prompt5").css("display", "none");
            var reads = new FileReader();
            f = document.getElementById('file2').files[0];

            //上传图片到后台
            if (f == null) {
                $.modal.alertWarning("请先上传核酸检测报告");
                return false;
            }

            // 上传到页面成功
            up_flag5 = 1;
            compressPic(f,0.6,function(newfile){
                var formData = new FormData();
                //formData.append('fileName', $("#fileName").val());
                //formData.append('file', f);
                var bl = convertBase64UrlToBlob(newfile);
                formData.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
                $.ajax({
                    url: "/common/collect/upload",
                    type: 'post',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(result) {
                        // console.log(result);
                        // console.log(result.filePath);
                        $("#hsPath").val(result.filePath);
                        up_flag5 = 2;
                    },
                    error: function(result) {
                        $.modal.alertWarning("核酸检测报告上传失败，请重试");
                        up_flag5 = 0;
                    }
                });

                reads.readAsDataURL(f);
                reads.onload = function(e) {
                    document.getElementById('img5').src = this.result;
                    $("#img5").css("display", "block");
                };
            });
        }

        // 点击更换图片
        function picClick(){
            var fileobj = document.getElementById("file");
            fileobj.click();
        }

        // 点击更换图片2
        function picClick1(){
            var fileobj = document.getElementById("file1");
            fileobj.click();
        }

        // 点击更换图片3
        function picClick2(){
            var fileobj = document.getElementById("file2");
            fileobj.click();
        }

        document.getElementById("datetime-picker").onclick = function() {
            document.activeElement.blur();
        };


        function compressPic(file, quality,callback) {
            let reads = new FileReader();
            reads.readAsDataURL(file)
            reads.onload = function() {
            	var re=this.result;
                 // 这里quality的范围是（0-1）
                 var canvas = document.createElement("canvas");
                 var ctx = canvas.getContext("2d");
                 var img = new Image();
                 img.src = re;
                 img.onload = function () {
                      let width = img.width;
                      canvas.width = width;
                      canvas.height = width * (img.height / img.width);
                      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                      // 转换成base64格式 quality为图片压缩质量 0-1之间  值越小压缩的越大 图片质量越差
                      let data = canvas.toDataURL(file.type, quality);
                      //return data
                      callback(data);
                 }
            };
        }

        function convertBase64UrlToBlob(urlData){
            var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type:mime});
        }

    </script>
</body>
</html>
